<template>
	<view>
		<view style="page_header"><navTop :show="false" @search="search($event, 1)"></navTop></view>
	   <!-- <button class="button" type="primary" @click="togglePopup('center', 'tip')">提示框</button> -->

		<uni-card
			:is-shadow="true"
			mode="title"
			note="true"
			@click="clickCard"
			v-for="(mitem, mindex) in mainlist"
			:index="mindex"
			:key="mindex"
			style="border-bottom: 1px solid #d9d9d9;"
			:title="mitem.nickName|cutStr"
			:thumbnail="mitem.avatarUrl"
			:extra="mitem.addtime"
			:fuid="mitem.uid"
			:phone="mitem.phone"
		>
			<view style="display: flex;">
				<view style="flex: 1;">
					
					<text style="border: #1AAD19 1px solid;border-radius: 5upx;padding: 0 30upx;color:#1AAD19 ;font-size: 30upx;" v-if="mitem.type!='b'">出</text>
					<text style="border: #A22C32 1px solid;border-radius: 5upx;padding: 0 30upx;color:#A22C32 ;font-size: 30upx;" v-else>找</text>
				
				</view>
				<view style="flex: 9;padding-left: 15upx;">
					<!-- <uni-list v-for="(item, index) in mitem.alist" :index="index" :key="index">
						<uni-list-item :title="'[' + item.name + ']'+item.volume " :rightText="'¥' + item.price" :showArrow="false" />
					</uni-list> -->
					<view style="padding: 10upx 20upx;font-size: 30upx;">
						
						<text style="padding-right: 10upx;">{{mitem.name}}</text>
						<text style="color: #A22C32;">●</text><text style="margin-left: 10upx;">{{mitem.volume}}</text>
						<text style="float: right;color: #A22C32;">¥{{mitem.price}}</text>
					</view>
					
				</view>
			</view>
<!-- 
			<view style="display: flex;" v-if="mitem.blist.length > 0">
				<view style="flex: 1;"><text style="border: #A22C32 1px solid;border-radius: 5upx;padding: 0 30upx;color:#A22C32 ;font-size: 30upx;">出</text></view>
				<view style="flex: 9;padding-left: 15upx;">
					<uni-list v-for="(item, index) in mitem.blist" :index="index" :key="index">
						<uni-list-item :title="'[' + item.name + '] '+item.volume" :rightText="'¥' + item.price" :showArrow="false" />
					</uni-list>
				</view>
			</view> -->
			
			
			
			<template slot="footer">
				<view class="footer-box">
					<view>
					<!-- 	<text v-if="mitem.hot" class="footer-box__item">浏览:{{ mitem.hot }}</text>
						<text v-else class="footer-box__item">浏览:0</text> -->
						
						<text v-if="mitem.area" class="footer-box__item" >地区:{{ mitem.area }}</text>
						<text v-else class="footer-box__item" >地区:暂无</text>
						
					</view>
					<view>
						
					<uni-icons type="chat" size="22" @click="toDiscuss(mitem.uid)"/>
					
						
						
					</view>
				</view>
			</template>
		</uni-card>
		
			<uni-load-more :status="status" :content-text="contentText" />

  <!-- 弹窗模板 -->
        <uni-popup  ref="showtip" :type="type" :mask-click="false" @change="change">
        	<view class="uni-tip pop" >
        		<view style="text-align: center;">
					<image src="/static/logo.png" mode="widthFix" style="width: 30%;"></image>
				</view>
        		<text class="uni-tip-content" >请允许 酒搜搜 获取您的手机号码，用于发布帖子后的联系方式。</text>
        		<view class="uni-tip-group-button">
        			
					<button class="buttonStyle" @click="cancel">取消授权</button>
					
					
					<button class="buttonStyle" style="background-color: #09BB07;color: #FFFFFF;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权获取</button>
        		</view>
        	</view>
        </uni-popup>
		
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
	
	
</template>

<script>
import navTop from '@/components/navTop.vue';
import uniSection from '@/components/uni-section/uni-section.vue';

import uniCard from '@/components/uni-card/uni-card.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
	components: {
		uniSection,
		uniCard,
		uniList,
		uniListItem,
		uniFab,
		uniPopup,
		navTop
	},
	data() {
		return {
			openid: uni.getStorageSync('userInfo').openid,
			uid: uni.getStorageSync('userInfo').uid,
			session_key:uni.getStorageSync('userInfo').session_key,
			//明价列表，找列表alist，出列表blist
			//
			phone:uni.getStorageSync('phoneinfo').phone,
			//headimg:'/static/logo.png',
			mainlist: [],

			title: 'uni-fab',
			directionStr: '垂直',
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'horizontal',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#a22c32',
				buttonColor: '#a22c32'
			},
			content: [
				{
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/logo.png',
					text: '找酒',
					active: false
				},
				{
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/logo.png',
					text: '出酒',
					active: false
				}
			],
			status:'loading',
			 contentText: {
			          contentdown:'上拉加载更多',
			          contentrefresh: '加载中',
			          contentnomore: '没有更多',
			 },
			page:1,
		};
	},
	onReachBottom : function(){
	            this.status = 'more';
	            this.loadMoreFunc();
	},
	onBackPress() {
		this.$refs['showtip'].close()
		if (this.$refs.fab.isShow) {
			this.$refs.fab.close();
			return true;
		}
		return false;
	},
	onLoad() {
		//uni.startPullDownRefresh();
		this.openid= uni.getStorageSync('userInfo').openid;
		this.loadData('first');
	},
	onShow() {
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
	        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	        //console.log('refresh');
			this.openid= uni.getStorageSync('userInfo').openid;
			this.loadData('first');
	        setTimeout(function () {
	            uni.stopPullDownRefresh();  //停止下拉刷新动画
	        }, 1000);
	},
	filters:{
		dateFormat(value){
			
			let timearr = value.replace(" ", ":").replace(/\:/g, "-").split("-");
			let timestr = ""+timearr[0]+"-"  + timearr[1].split("")[1] + "-" + timearr[2] + "\t" +  ""
			
			return timestr
		},
		
		 cutStr (value) {
		      if (!value) return ''
		      if (value.length > 4) {
		        return value.slice(0,4) + '...'
		      }
		      return value
		    }
		
		
	},
	onShareAppMessage(res) {
			      return {
			        title: '你身边的白酒价格大全',
			        path: ''
			      }
	},
	methods: {
		loadMoreFunc(){
			console.log("更多加载");
			
			
			this.loadData('more');
			
			
		},
		getPhoneNumber: function (e) {
		    var that = this;
			that.cancel();
		    //console.log(e.detail.errMsg == "getPhoneNumber:ok");
		    const sendData = {
				  encryptedData: e.detail.encryptedData,
				  iv: e.detail.iv,
				  session_key: that.session_key,
				  id: this.uid
		    };
		    
			
			
			if (e.detail.errMsg == "getPhoneNumber:ok") {
		      wx.request({
		        url: this.userApi+'/addphone',
		        data: sendData,
		        method: "POST",
		        success: function (res) {
		          console.log(res.data);
				  
				  uni.setStorage({
				  	key: 'phoneinfo',
				  	data: res.data,
				  	success() {
						//this.phone=
				  		//uni.navigateBack();
						console.log('手机号码保存成功');
				  	}
				  });
				  
		        }
		      })
		    }
		  },
		togglePopup() {
			//this.type = type
			this.$nextTick(() => {
				this.$refs['showtip'].open()
			})
		},
		cancel() {
			this.$refs['showtip'].close()
		},
		change(e) {
			console.log('是否打开:' + e.show)
		},
		toDiscuss(pid){
		
		//防止已经登陆页面没刷新
		this.openid = uni.getStorageSync('userInfo').openid;
		
		if (this.openid) {
		
				uni.navigateTo({
					url:'/pages/member/discuss?id='+pid
				})
		} else {
			//console.log(that.openid);
			//先登陆授权
			uni.showModal({
				title: '消息',
				content: '请先去会员中心登陆！',
				showCancel: false,
				confirmText: '确定'
			});
			//console.log('用户不在');
		}
		
		},
		loadData(status) {
			
			if(status=='first'){
				
				this.page=1;
				this.mainlist=[];
			}
			const sendData = {
				"page":this.page
				
			};
			uni.request({
				url: this.webUrl + '/price', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						//console.log(res.data);
						this.page+=1;
						this.mainlist.push(...res.data);
						
					} else {
						this.status='noMore'
						console.log('数据没有');
					}
				}
			});
		},
		
		trigger(e) {
			var that = this;
			//防止已经登陆页面没刷新
		
			if (uni.getStorageSync('userInfo').openid) {
				 
				//手机授权
				if(uni.getStorageSync('phoneinfo').phone){
					
					
					
						
						const sendData = {
							"uid": this.uid
						};
						
						
						
						uni.request({
							url: this.userApi + '/apicheck', //仅为示例，并非真实接口地址。
							data: sendData,
							dataType: 'json',
							method: 'get',
							header: {
								'content-type': 'application/json' // 微信默认就是
							},
							success: res => {
								
								console.log(res.data);
								if (res.statusCode !== 404) {
									
									if(res.data.message.is_use=='1'){
										uni.showModal({
											title: '消息',
											content: '您的账号已经被禁用！',
											showCancel: false,
											confirmText: '确定'
										});
										
										return;
										
									}
									
									
									if(res.data.message.a=='0'){
										
										
									
									if (e.index == 0) {
										//找
										uni.navigateTo({
											url: '/pages/member/AddBuy'
										});
									} else {
										//出
										uni.navigateTo({
											url: '/pages/member/AddSell'
										});
									}
									
									
									
									
										
										}else{
										uni.showModal({
											title: '消息',
											content: '每'+res.data.message.interval+'分钟只能发一条，请'+res.data.message.interval+'分钟候再试！',
											showCancel: false,
											confirmText: '确定'
										});
									}
									
									
									
								} else {
									
									
									console.log('数据没有');
								}
							}
						});
						
					
					
					
				
					
				}else{
					this.togglePopup()
				}
				
				
				
				
				
			} else {
				//console.log(that.openid);
				//先登陆授权
				uni.showModal({
					title: '消息',
					content: '请先去会员中心登陆！',
					showCancel: false,
					confirmText: '确定'
				});
				//console.log('用户不在');
			}

			//console.log(e)
			this.content[e.index].active = !e.item.active;
			// uni.showModal({
			// 	title: '提示',
			// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
			// 	success: function(res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定')
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消')
			// 		}
			// 	}
			// })
		},
		clickCard() {
//			console.log('....');
		},
		fabClick() {
			/*
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
				*/
		},
		switchBtn(hor, ver) {
			if (hor === 0) {
				this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal';
				this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平';
			} else {
				this.horizontal = hor;
				this.vertical = ver;
			}
			this.$forceUpdate();
		}
	}
};
</script>

<style>
	
		.buttonStyle {
			width: 110px;
			border-radius: 2px;
			border:none;
		}
		
		.pop {
		  position: fixed;
		  margin: 120px 10px;
		
		  background: rgba(0,0,0,.3);
		  z-index: 9999;
		 
		}
		.popup-content {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			background-color: #fff;
			padding: 15px;
			font-size: 14px;
		}
	
		/* 提示窗口 */
		.uni-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			padding: 30px 15px;
			
			background-color: #fff;
			
		}
	
		.uni-tip-title {
			
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #333;
		}
	
		.uni-tip-content {
			/* padding: 15px;
	*/
			font-size: 14px;
			color: #666;
		}
	
		.uni-tip-group-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			margin-top: 20px;
		}
	
		.uni-tip-button {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: #3b4144;
		
		}
	
.page_header {
	position: sticky;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	z-index: 99;
}
.mui-icon-avata {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: skyblue;
	font-size: larger;
	text-align: center;
	padding-top: 20%;
}
header {
	height: 55px;
	min-height: 55px;
}

.footer-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: space-between;
	flex-direction: row;
}

.footer-box__item {
	align-items: center;
	padding: 10rpx 0;
	font-size: 30rpx;
	color: #666;
}
</style>
